<template>
	<view class="content">
		<global-contact></global-contact>
		<!-- #ifdef MP-WEIXIN -->
		<view class="header">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="header header-top-h5">
				<!-- #endif -->
				<view class="head">
					<!-- <image style="width: 30rpx;height: 30rpx;"
						src="https://www.atuanjian.com/appletStatic/static/local.png" mode=""></image>
					<view class="local" @click="chooseCity()">
						<text>{{currentCity.lastIndexOf('市')?currentCity.replace(/市/,""):currentCity}}</text>
						<view class="trang"></view>
					</view> -->
					<image @click="changeSort()" src="https://www.atuanjian.com/appletStatic/static/sort.png"
						mode="aspectFit"></image>
					<view class="search">
						<u-search @search="search()" placeholder="户外拓展/团建/骑行" :showAction="false"
							v-model="keyword"></u-search>
					</view>
					<u-line direction="col" length="24rpx" color="#E7E7E7"></u-line>
					<image @click="filtrate()" src="https://www.atuanjian.com/appletStatic/static/choice.png"
						mode="aspectFit"></image>
				</view>
			</view>
			<view class="list" v-if="list.length > 0">
				<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)"
					:style="{ 'marginTop': index == 0 || index == 1 ? '120rpx' : '0' }">
					<image :src="showImg + item.img" mode=""></image>
					<view class="info">
						<view class="title">{{ item.title }}</view>
						<!-- <scroll-view scroll-x="true" class="scroll" v-if="item.abstract">
							<view class="mark">
								<text v-for="(item1,index1) in item.abstract.split(',')" :key="index1">{{item1}}</text>
							</view>
						</scroll-view> -->
						<view class="system">
							<!-- 	<view class="left">
								<text>{{item.day_num}}</text>
								<u-line direction="col" length="20rpx" margin="0 12rpx 0 14rpx;"
									color="#888888"></u-line>
								<text>{{item.people_num}}</text>
							</view> -->
							<view class="flex">
								<view class="price">
									<span>￥</span><text>{{ item.people_price || 0 }}</text>{{ item.people_price_unit || '' }}
								</view>
								<view class="car" @click.stop="addShop(item.id, 1)">
									<image src="https://www.atuanjian.com/appletStatic/static/images/u-car.png" mode="">
									</image>
								</view>
							</view>
							<!-- <view class="right">
								<text><text>{{ item.people_price }}</text>{{ item.people_price_unit || '' }}</text>
							</view> -->
						</view>
						<!-- <view class="num">
							<text class="left">{{item.catname}}</text>
							<text class="right">{{item.capita||''}}</text>
						</view> -->
					</view>
				</view>
			</view>
			<view class="list" v-else>
				<u-empty mode="list" :text="uEmptyText" icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</view>

			<u-picker :show="showSort" keyName="label" :columns="sortList" @cancel="cancelSort"
				@confirm="confirmSort"></u-picker>
			<tabBar current='0'></tabBar>
		</view>
</template>

<script>
import tabBar from '@/components/tabBar.vue'
import {
	getProduct,
	siteSetting,
	addCard
} from '@/utils/request.js'
export default {
	data() {
		return {
			keyword: '',
			showImg: '',
			list: [],
			page: 0,
			totalPage: 1,
			catid: 3,
			priceSort: '',
			showCity: false,
			cityList: [],
			currentCity: uni.getStorageSync('webAddress'),
			showSort: false,
			sortList: [
				[{
					label: '推荐排序',
					value: ''
				}, {
					label: '价格低到高',
					value: 'asc'
				}, {
					label: '价格高到低',
					value: 'desc'
				}]
			],
			catId: '',
			newUrl: '',
			uEmptyText: '数据加载中...',
		}
	},
	components: {
		tabBar
	},
	methods: {
		async addCard(data) {
			return await addCard(data)
		},
		addShop(id, type) {
			if (!uni.getStorageSync('userInfo')) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return uni.navigateTo({ url: '/pagesB/login/login' })
			}
			const data = { user_id: JSON.parse(uni.getStorageSync('userInfo')).id, product_id: id, type: type }
			this.addCard(data).then(res => {
				uni.showToast({
					title: '添加成功'
				})
			})
		},
		changeSort() {
			this.showSort = true
		},
		cancelSort() {
			this.showSort = false
		},
		confirmSort(e) {
			this.priceSort = e.value[0].value
			this.showSort = false
			this.page = 0
			this.list = []
			this.getList()
		},
		async siteSetting() {
			return await siteSetting()
		},
		cancel1() {
			this.showCity = false
		},
		confirm1(event) {
			uni.setStorageSync('webAddress', event.value[0])
			this.currentCity = event.value[0]
			this.showCity = false
			this.page = 0
			this.list = []
			this.getList()
		},
		getSetting() {
			this.siteSetting().then(res => {
				uni.setStorageSync('webAddress', res.default_substation)
				// this.currentCity=res.default_substation
				if (res.city && res.city.length > 0) {
					this.cityList.push(res.city)
				}
				// this.defaultMethods()
			})
		},
		async getProduct(data) {
			return await getProduct(data)
		},
		getList() {
			// console.log('搜索关键字', this.keyword)
			let data = {
				catid: this.catid,
				p: this.page,
				n: 10,
				typeId: this.catId, //筛选分类字符串分割id ??????
				search: this.keyword,
				priceSort: this.priceSort
			}
			this.getProduct(data).then(res => {
				if (res.count < 1) {
					this.$data.uEmptyText = '暂无数据';
					return false;
				}
				this.list = [...this.list, ...res.list]
				this.totalPage = Math.ceil(res.count / 10)
				// console.log(this.category)
			}).catch(err => {
				// console.log(err)
			})
		},
		chooseCity() {
			this.showCity = true
			// uni.showToast({
			// 	icon:'loading',
			// 	title:'正在研发中...'
			// })
		},
		search() {
			if (!this.keyword.trim()) {
				uni.showToast({
					icon: 'none',
					title: '请输入关键词'
				})
				return;
			}
			this.catId = ''
			this.list = []
			this.page = 0

			// #ifdef H5
			var redirectToUrl = this.$route.fullPath;
			if (this.$route.query['search']) {
				// console.log(this.$route.query['search'])
				redirectToUrl = redirectToUrl.replace('search=' + this.$route.query['search'], 'search=' + this
					.keyword); // 替换搜索内容
			} else {
				redirectToUrl += `&search=${this.keyword}`; // 携带参数
			}
			if (this.$route.query['keywords']) {
				redirectToUrl = redirectToUrl.replace('keywords=' + this.$route.query['keywords'], 'keywords=' + this
					.keyword); // 替换搜索内容
			} else {
				redirectToUrl += `&keywords=${this.keyword}`; // 携带参数
			}
			uni.redirectTo({
				url: redirectToUrl
			});
			// #endif
			// #ifdef MP-WEIXIN
			this.getList();
			// #endif
		},
		// changeSort(){
		// 	// uni.showToast({
		// 	// 	icon:'loading',
		// 	// 	title:'正在研发中...'
		// 	// })
		// 	if(this.priceSort==''){
		// 		this.priceSort='desc'
		// 	}else if(this.priceSort=='desc'){
		// 		this.priceSort='asc'
		// 	}else{
		// 		this.priceSort='desc'
		// 	}
		// 	console.log('当前模式',this.priceSort)
		// 	this.page=0
		// 	this.list=[]
		// 	this.getList()
		// },
		filtrate() {
			// uni.setStorageSync('mark_id',this.catid)
			uni.navigateTo({
				url: '/pagesB/annualMeeting/filtrate?categoryId=' + this.catid + '&typeId=' + this.catId
			})
		},
		toDetail(item) {
			uni.navigateTo({
				url: `/pagesA/detail/product?id=${item.id}`
			})
		}
	},
	onLoad(option) {
		// console.log('产品', option)
		this.showImg = this.$config.showImgApi;
		if (option.id) {
			this.catid = option.id;
			this.catId = uni.getStorageSync(option.id)
		}
		if (option.typeId) {
			this.catId = option.typeId
		}
		if (option.keywords) {
			this.keyword = option.keywords
		}
		if (option.title_text) {
			uni.setNavigationBarTitle({ // 调用uni-app提供的API设置导航栏标题
				title: option.title_text // 自定义标题内容
			})
		}
	},
	onShow() {
		let option;
		// #ifdef H5
		option = this.options;
		// #endif
		// #ifdef MP-WEIXIN
		option = this.$mp.query;
		// #endif
		if (option && option.id && uni.getStorageSync(option.id)) {
			this.catId = uni.getStorageSync(option.id);
			if (!option.typeId) {
				// #ifdef H5
				const newUrl = location.href + `&typeId=${this.catId}`;
				history.pushState({}, null, newUrl);
				// #endif
				// #ifdef MP-WEIXIN
				const newUrl = this.$mp.page.$page.fullPath + `&typeId=${this.catId}`;
				this.newUrl = newUrl;
				// #endif
			} else {
				// #ifdef H5
				const includeQuestion = location.href.includes('?');
				let url = includeQuestion ? location.href.split('?')[0] : location.href;
				const newUrl = url + `?id=${option.id}&typeId=${this.catId}`;
				history.pushState({}, null, newUrl);
				// #endif
			}
			uni.removeStorageSync(option.id);
		} else if (option && option.typeId) {
			this.catId = option.typeId;
		}
		this.page = 0
		this.list = [];
		this.getList();
	},
	onReachBottom() {
		if (this.page < this.totalPage - 1) {
			this.page++
			this.getList();
		}
	},
	onShareAppMessage() {
		return {
			title: '西安蚂蚁团建',
			path: this.newUrl
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #FFFFFF;
}

.header {
	background: #FFB850;
	width: 750rpx;
	height: 88rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;

	.head {
		@include flex_style(space-between, center, row nowrap);
		padding: 16rpx 22rpx 16rpx 30rpx;

		.local {
			@include flex_style(flex-start, center, row nowrap);

			text {
				display: block;
				max-width: 85rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 28rpx;
				font-family: 苹方-简;
				font-weight: normal;
				line-height: 38rpx;
				color: #FFFFFF;
			}

			.trang {
				width: 0;
				height: 0;
				border-left: 7rpx solid transparent;
				border-right: 7rpx solid transparent;
				border-top: 10rpx solid #FFFFFF;
				margin-left: 8rpx;
			}
		}

		.search {
			// width: 440rpx;
			height: 56rpx;
			flex: 1;

			::v-deep.u-search__content {
				background-color: #F5F5F5 !important;
				border-width: 0;
			}

			::v-deep.u-search__content__input {
				height: 56rpx !important;
				background-color: #F5F5F5 !important;
				border-width: 0;
			}
		}

		image {
			width: 48rpx;
			height: 48rpx;
		}

	}
}

.list {
	// padding: 88rpx 30rpx 0;
	@include flex_style(space-between, center, wrap);
	width: 92%;
	margin: 0 auto;

	.item {
		border-bottom: 2rpx solid #F5F5F5;
		width: 327rpx;
		background-color: #FFFFFF;
		box-shadow: 3rpx 3rpx 5rpx rgba(215, 215, 215, 0.5);
		border-radius: 8rpx;
		overflow: hidden;
		margin-bottom: 24rpx;

		image {
			width: 100%;
			height: 264rpx;
		}

		.info {
			.title {
				width: 95%;
				height: 70rpx;
				font-size: 25rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1A1A1A;
				@include word_over(2);
				white-space: normal;
				margin: 10rpx auto 8rpx;
			}

			.scroll {
				width: 416rpx;
				margin-bottom: 8rpx;

				// height: 36rpx;
				.mark {
					height: 36rpx;
					@include flex_style(flex-start, center, row nowrap);
					white-space: nowrap;

					text {
						padding: 0 8rpx;
						line-height: 36rpx;
						background: rgba(245, 245, 245, 0.39);
						margin-right: 8rpx;
						border-radius: 4rpx;
						font-size: 22rpx;
						font-family: 苹方-简;
						font-weight: normal;
						color: #666666;
					}
				}
			}

			.system {
				@include flex_style(space-between, center, row nowrap);
				margin-bottom: 12rpx;

				.left {
					@include flex_style(flex-start, center, row nowrap);

					text {
						font-size: 24rpx;
						font-family: 苹方-简;
						font-weight: normal;
						line-height: 32rpx;
						color: #888888;
					}
				}

				.right {
					text {
						font-size: 20rpx;
						font-family: 苹方-简;
						font-weight: normal;
						line-height: 28rpx;
						color: #888888;

						text {
							font-size: 28rpx;
							line-height: 40rpx;
							color: #FF5E00;
						}
					}
				}
			}

			.num {
				@include flex_style(space-between, center, row nowrap);

				.left {
					font-size: 24rpx;
					font-family: 苹方-简;
					font-weight: normal;
					line-height: 32rpx;
					color: #666666;
				}

				.right {
					font-size: 24rpx;
					font-family: 苹方-简;
					font-weight: normal;
					line-height: 32rpx;
					color: #BDBDBD;
				}
			}
		}
	}

	.item:last-child {
		border-bottom: none;
	}
}

.flex {
	display: flex;
	justify-content: space-between;
	width: 276rpx;
	padding-top: 16rpx;
	margin: 0 auto;

	.car {
		width: 50rpx;
		height: 50rpx;
		background-color: #F59A23;
		border-radius: 50%;
		@include flex_style(center, center, row nowrap);

		image {
			width: 29rpx;
			height: 27rpx;
		}
	}
}

.price {
	font-size: 20rpx;
	font-family: 苹方-简;
	font-weight: normal;
	line-height: 28rpx;
	color: #888888;
	padding-right: 20rpx;
	padding-bottom: 16rpx;
	text-align: right;

	span {
		font-size: 20rpx;
		color: #F59A23;
	}

	text {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #F59A23;
	}
}
</style>